<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		#biaoTi{
			width: 10vw;
			height: 5vw;
			font-family: PingFang-SC-Medium;
			font-size: 5vw;
			font-weight: normal;
			font-stretch: normal;
			line-height: 4vw;
			letter-spacing: 0vw;
			color: #09b674;
			margin-left: 45vw;
			margin-top: 4vw;
		}
		#xiaHuaXian{
			background-color: #adadad;
		}
		#neiRong{
			display: flex;
		}
		#fenLei{
			width: 20vw;
			height: 150vw;
			border-right:1px solid #DDDDDD;
		}
		.leiBie{
			width: 20vw;
			font-size: 4vw;
			display: flex;
			justify-content: center;
			margin-top: 6vw;
			color: #4b4b4b;
		}
		#shangPin{
			margin-left: 3vw;
		}
		#touBu{
			width: 73vw;
			height: 25vw;
			background-color: #dddddd;
			border-radius: 1vw;
			margin-top: 3vw;
			
		}
		#touBu img{
			width: 73vw;
			height: 25vw;
			background-color: #dddddd;
			border-radius: 1vw;
		}
		#tuiJianZhuanQu{
			margin-top: 3vw;
			display: flex;
			align-items: center;
		}
		#tuiJian{
			width: 25vw;
			/* height: 3vw; */
			font-family: PingFang-SC-Regular;
			font-size: 3vw;
			font-weight: normal;
			font-stretch: normal;
			display: flex;
			justify-content: center;
			/* line-height: 13vw; */
			/* letter-spacing: 0vw; */
			color: #101010;
		}
		.hengXian{
			/* margin-top: 2vw; */
			width: 6vw;
			height: 0vw;
			background-color: #aaaaaa;
		}
		.danPin{
			width: 20vw;
			height: 20vw;
			/* margin-left: 5vw; */
			margin-top: 5vw;
			/* display: flex; */
		}
		.danPinTu{
			width: 20vw;
			height: 14vw;
			background-color: #ffffff;
		}
		.danPinTu2{
			width: 6vw;
			height: 11vw;
			margin-left: 7vw;
			margin-top: 2vw;
		}
		.danPinWenBen{
			width: 20vw;
			height: 3vw;
			font-family: PingFang-SC-Medium;
			font-size: 3vw;
			font-weight: normal;
			font-stretch: normal;
			margin-top: 3vw;
			color: #101010;
			display: flex;
			justify-content: center;
		}
		#danPin{
			display: flex;
		}
		#danPinZuo{
			width: 20vw;
			display: flex;
			flex-direction: column;
		}
		#danPinZhong{
			margin-left: 8vw;
		}
		#danPinYou{
			margin-left: 8vw;
		}
		#diBu{
			width: 100%;
			position: fixed;
			bottom: 0px;
			height: 13vw;
			border-top: thick solid #f4f5f5;
			display: flex;
		}
		.diBu{
			width: 6vw;
			height: 10vw;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.diTu{
			width: 6vw;
			height: 6vw;
		}
		.diBu span{
			width: 6vw;
			height: 5vw;
			/* font-family: PingFang-SC-Medium; */
			font-size: 3vw;
			font-weight: normal;
			font-stretch: normal;
			/* line-height: 10vw; */
			letter-spacing: 0vw;
			color: #666666;
		}
		#shouYe{
			margin-left: 11vw;
		}
		#fenLei2{
			margin-left: 19vw;
		}
		#gouWuChe{
			margin-left: 18vw;
			width: 6vw;
			height: 10vw;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		#gouWuChe span{
			width: 9vw;
			height: 5vw;
			/* font-family: PingFang-SC-Medium; */
			font-size: 3vw;
			font-weight: normal;
			font-stretch: normal;
			/* line-height: 10vw; */
			letter-spacing: 0vw;
			color: #666666;
		}
		#woDe{
			margin-left: 17vw;
		}
		.gao{
			margin-top: 2vw;
		}
		#xuanZhong{
			width: 1vw;
			height: 7vw;
			background-color: #09b674;
			position: absolute;
			margin-top: 6vw;
		}
	</style>
	<body>
		<h1 id='biaoTi'>分类</h1>
		<hr id="xiaHuaXian">
		<div id="neiRong">
			<div id="xuanZhong">
				
			</div>
			<div id="fenLei">
				<p class="leiBie">洗发水</p>
				<p class="leiBie">洗面奶</p>
				<p class="leiBie">牙膏</p>
				<p class="leiBie">沐浴露</p>
				<p class="leiBie">洗手液</p>
				<p class="leiBie">洗衣粉</p>
				<p class="leiBie">洗衣液</p>
				<p class="leiBie">洗碗精</p>
				<p class="leiBie">纸巾</p>
				<p class="leiBie">香皂</p>
			</div>
			<div id="shangPin">
				<div id="touBu">
					<img src="css/1ce212faf2bfb258.jpg" >
				</div>
				<div id="tuiJianZhuanQu">
					<hr class="hengXian" style="margin-right: 0px;">
					<span id="tuiJian">推荐专区分类</span>
					<hr class="hengXian" style="margin-left: 0px;">
				</div>
				<div id="danPin">
					<div id="danPinZuo">
						<div class="danPin">
							<div class="danPinTu">
								<img src="css/57e9f5ed27907da2.jpg" class="danPinTu2">
							</div>
							<span class="danPinWenBen">欧莱雅洗发水</span>
						</div>
						<div class="danPin">
							<div class="danPinTu">
								<img src="css/57e9f5ed27907da2.jpg" class="danPinTu2">
							</div>
							<span class="danPinWenBen">欧莱雅洗发水</span>
						</div>
						<div class="danPin">
							<div class="danPinTu">
								<img src="css/57e9f5ed27907da2.jpg" class="danPinTu2">
							</div>
							<span class="danPinWenBen">欧莱雅洗发水</span>
						</div>
						<div class="danPin">
							<div class="danPinTu">
								<img src="css/57e9f5ed27907da2.jpg" class="danPinTu2">
							</div>
							<span class="danPinWenBen">欧莱雅洗发水</span>
						</div>
					</div>
					<div id="danPinZhong">
						<div class="danPin">
							<div class="danPinTu">
								<img src="css/57e9f5ed27907da2.jpg" class="danPinTu2">
							</div>
							<span class="danPinWenBen">欧莱雅洗发水</span>
						</div>
						<div class="danPin">
							<div class="danPinTu">
								<img src="css/57e9f5ed27907da2.jpg" class="danPinTu2">
							</div>
							<span class="danPinWenBen">欧莱雅洗发水</span>
						</div>
						<div class="danPin">
							<div class="danPinTu">
								<img src="css/57e9f5ed27907da2.jpg" class="danPinTu2">
							</div>
							<span class="danPinWenBen">欧莱雅洗发水</span>
						</div>
						<div class="danPin">
							<div class="danPinTu">
								<img src="css/57e9f5ed27907da2.jpg" class="danPinTu2">
							</div>
							<span class="danPinWenBen">欧莱雅洗发水</span>
						</div>
					</div>
					<div id="danPinYou">
						<div class="danPin">
							<div class="danPinTu">
								<img src="css/57e9f5ed27907da2.jpg" class="danPinTu2">
							</div>
							<span class="danPinWenBen">欧莱雅洗发水</span>
						</div>
						<div class="danPin">
							<div class="danPinTu">
								<img src="css/57e9f5ed27907da2.jpg" class="danPinTu2">
							</div>
							<span class="danPinWenBen">欧莱雅洗发水</span>
						</div>
						<div class="danPin">
							<div class="danPinTu">
								<img src="css/57e9f5ed27907da2.jpg" class="danPinTu2">
							</div>
							<span class="danPinWenBen">欧莱雅洗发水</span>
						</div>
						<div class="danPin">
							<div class="danPinTu">
								<img src="css/57e9f5ed27907da2.jpg" class="danPinTu2">
							</div>
							<span class="danPinWenBen">欧莱雅洗发水</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="diBu">
			<div class="diBu gao" id="shouYe">
				<img src="css/首页.png" class="diTu">
				<span>首页</span>
			</div>
			<div class="diBu gao" id="fenLei2">
				<img src="css/分类.png" class="diTu">
				<span>分类</span>
			</div>
			<div class="gao" id="gouWuChe">
				<img src="css/购物车.png" class="diTu">
				<span>购物车</span>
			</div>
			<div class="diBu gao" id="woDe">
				<img src="css/我的.png" class="diTu">
				<span>我的</span>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		let xuanZhong=document.getElementById('xuanZhong')
		let leiBie=document.getElementsByClassName('leiBie')
		for(let i=0;i<leiBie.length;i++){
			if(i>0){
				leiBie[i].onclick=function(){
					console.log(xuanZhong.marginTop)
					console.log(leiBie[i].offsetTop)
					xuanZhong.style.marginTop=(Number(leiBie[i-1].offsetTop)-20)+'px'
				}
			}else {
				leiBie[i].onclick=function(){
					xuanZhong.style.marginTop='6vw'
				}
			}
		}
	</script>
</html>
